<template>
  <el-tooltip
    class="box-item"
    effect="dark"
    :content="isFullScreen ? '退出全屏' : '全屏'"
    placement="bottom"
  >
    <div class="fullScreen" @click="toggleFullScreen">
      <FullScreen v-if="!isFullScreen" />
      <CXSvgIcon name="close-fullscreen" v-if="isFullScreen" />
    </div>
  </el-tooltip>
</template>
<script lang="ts" setup>
import { ref,onMounted,onUnmounted } from 'vue';
import {FullScreen} from '@element-plus/icons-vue';
import CXSvgIcon from 'baseCom/CXSvgIcon/index.vue';

const isFullScreen = ref(false);

onMounted(() => {
  const doc:any = document;
  // 判断是否全屏
  let _isFullscreen = doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.fullScreen || doc.mozFullScreen || doc.webkitIsFullScreen
  _isFullscreen = !!_isFullscreen
  document.addEventListener('fullscreenchange', () => {// 全屏事件
    isFullScreen.value = !isFullScreen.value;
  })
  document.addEventListener('mozfullscreenchange', () => {// 全屏事件
    isFullScreen.value = !isFullScreen.value;
  })
  document.addEventListener('webkitfullscreenchange', () => {
    isFullScreen.value = !isFullScreen.value;
  })
  document.addEventListener('msfullscreenchange', () => {
    isFullScreen.value = !isFullScreen.value;
  })
  isFullScreen.value = _isFullscreen;
});

onUnmounted(() => {
  // 移除事件监听器
  document.removeEventListener('fullscreenchange', () => {})
  document.removeEventListener('mozfullscreenchange', () => {})
  document.removeEventListener('webkitfullscreenchange', () => {})
  document.removeEventListener('msfullscreenchange', () => {})
});


// 全屏
const toggleFullScreen = () => {
  const main:any = document.body;
  const doc:any = document;
  if (isFullScreen.value) {
    if (doc.exitFullscreen) {//标准
      doc.exitFullscreen()
    } else if (doc.mozCancelFullScreen) {//火狐
      doc.mozCancelFullScreen()
    } else if (doc.webkitCancelFullScreen) {//谷歌
      doc.webkitCancelFullScreen()
    }
  } else {
    if (main.requestFullscreen) {//标准
      main.requestFullscreen()
    } else if (main.mozRequestFullScreen) {//火狐
      main.mozRequestFullScreen()
    } else if (main.webkitRequestFullScreen) {//谷歌
      main.webkitRequestFullScreen()
    }
  }
}
</script>
